$tabs: $prefix + 'tabs';
$tab: $prefix + 'tab';

.#{$tabs} {
    @apply w-full;
}

.#{$tab} {
    &-header {
        @apply text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700;
    }

    &-list {
        @apply mb-4 border-b border-gray-200 dark:border-gray-700;

        &-inner {
            @apply flex flex-wrap -mb-px;
        }
    }

    &-panel {
        @apply hidden;

        &-active-true {
            display: unset;
        }
    }

    &-item {
        button {
            @apply inline-block p-4 border-b-2 border-transparent rounded-t-lg;
        }

        &-active-false button {
            @apply dark:border-transparent text-gray-500 dark:text-gray-400 border-gray-100 dark:border-gray-700 hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300;
        }

        &-active-true button {
            @apply text-blue-600 border-blue-600 dark:text-blue-500 dark:border-blue-500;
        }
    }
}